import React, { useState,useEffect } from 'react'
import { Table } from 'antd';
import { Form,Row, Col, Input, Button,Radio,Upload,Select,Tag,InputNumber,Modal} from 'antd';
import { DownOutlined, UpOutlined } from '@ant-design/icons';
import {useDispatch, useSelector} from "react-redux"
import "./charge.less"

const {Option} = Select

const columns2 = [
  {
    title: '创建时间',
    dataIndex: 'name',
  },
  {
    title: '详细描述',
    dataIndex: 'age',
  },
  {
    title: '状态',
    dataIndex: 'address',
  },
  {
    title: '警告处理',
    dataIndex: 'address',
        render: row => {
        return <Button>整改</Button>
          }
  },
];
const data = [
  {
    key: '1',
    name: 'John Brown',
    age: 32,
    address: 'New York No. 1 Lake Park',
  },
  {
    key: '2',
    name: 'Jim Green',
    age: 42,
    address: 'London No. 1 Lake Park',
  },
  {
    key: '3',
    name: 'Joe Black',
    age: 32,
    address: 'Sidney No. 1 Lake Park',
  },
];

export default function Shop() {
    const dispatch = useDispatch();
    const  {shopData}  = useSelector((state) => state.shopRC);
    console.log(shopData);
useEffect(()=>{
        dispatch({
            type: 'getShopSaga',
            payload: "",
        })
    },[])

    const [expand, setExpand] = useState(false);
    const [selectedRowKeys, setSelectedRowKeys] = useState([])
    const [loading, setLoading] = useState(false)
    const [detail, setDetail] = useState({})
    const [form] = Form.useForm();

    const [isModalVisible, setIsModalVisible] = useState(false);
    const [isModalVisible2, setIsModalVisible2] = useState(false);

  const showModal = (record) => {
      console.log(record);
      setDetail(record)
    setIsModalVisible(true);
  };

  const handleOk = () => {
    setIsModalVisible(false);
  };

  const handleCancel = () => {
    setIsModalVisible(false);
  };

    const showModal2 = (record) => {
      console.log(record);
      setDetail(record)
    setIsModalVisible2(true);
  };

  const handleOk2 = () => {
    setIsModalVisible2(false);
  };

  const handleCancel2 = () => {
    setIsModalVisible2(false);
  };

const columns = [
  {
    title: '店铺名称',
    dataIndex: 'shopName',
    key:"shopName"
  },
  {
    title: '信誉积分',
    dataIndex: 'prestige',
    key:"prestige"
  },
  {
    title: '商铺状态',
    dataIndex: 'status',
    key:"status",
        render: row => {
            if(row == 1){
            return <Tag color="green">启用</Tag>
            }else if(row == 2){
            return <Tag color="volcano">停用</Tag>
            }
          }
  },
  {
    title: '电话',
    dataIndex: 'telephone',
    key:"telephone"
  },
  {
    title: '商铺类型',
    dataIndex: 'type',
    key:"type",
            render: row => {
            if(row == 1){
            return <Tag color="green">商铺</Tag>
            }else{
            return <Tag color="geekblue">充电站</Tag>
            }
          }
  },
  {
    title: '门店详情',
    dataIndex: 'telephone',
    key:"telephone",
        render:(row,record) => {
        return (<a onClick={()=>showModal(record)}>查看详情</a>)
          }
  },
  {
    title: '查看警告',
    dataIndex: 'status',
    key:"status",
            render: (row,record)=> {
        return (<a onClick={()=>showModal2(record)}>警告详情</a>)
          }
    },
  {
    title: '警告',
    key: 'id',
    render: row => {
        return <Button>警告</Button>
          }
  },
    {
    title: '下架',
    dataIndex: 'status',
    key: 'id',
    render: row => {
        if(row == 1){
        return <Button>停用</Button>
        }else if(row == 2){
        return <Button>启用</Button>
        }
          }
  },
];

  const getFields = () => {
    const count = expand ? 3 : 4;
    const children = [
        <Col span={8}>
          <Form.Item
            name="shopName"
            label="店铺名称"
            rules={[
              {
                required: false,
                message: 'Input something!',
              },
            ]}
          >
            <Input/>
          </Form.Item>
        </Col>,
        <Col span={4}>
          <Form.Item
            name="status"
            label="店铺状态"
            rules={[
              {
                required: false,
                message: 'Input something!',
              },
            ]}
          >
            <Select placeholder="请选择">
            <Option value="all">所有数据</Option>
            <Option value="stop">停用</Option>
            <Option value="active">启用</Option>
            </Select>
          </Form.Item>
        </Col>,
        <Col span={4}>
          <Form.Item
            name="prestige"
            label="信誉值"
            rules={[
              {
                required: false,
                message: 'Input something!',
              },
            ]}
          >
            <InputNumber min={0} max={100}/> - <InputNumber min={0} max={100}/>
          </Form.Item>
        </Col>,
    ];
    return children;
  };

  const onFinish = (values: any) => {
    console.log('Received values of form: ', values);
  };

  const onSelectChange = selectedRowKeys => {
    // console.log('selectedRowKeys changed: ', selectedRowKeys);
    setSelectedRowKeys(selectedRowKeys);
  };

    const rowSelection = {
      selectedRowKeys,
      onChange: onSelectChange,
    };
    const hasSelected = selectedRowKeys.length > 0;
    return (
        <div className="charge-box">
      <Modal title="商铺详情" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel}>
        <p>商铺名称： {detail.shopName}</p>
        <p>商铺账户： {detail.account}</p>
        <p>商铺地址： {detail.address}</p>
        <p>手机号码： {detail.telephone}</p>
        <p>营业执照： {detail.licence}</p>
        <p>商铺金额： {detail.money}</p>
        <p>店长姓名： {detail.managerName}</p>
        <p>身份证号： {detail.idCard}</p>
        <p>营业时间： {detail.startTime}</p>
      </Modal>
      <Modal title="警告详情" visible={isModalVisible2} onOk={handleOk2} onCancel={handleCancel2}>
        <Table columns={columns2} dataSource={data} size="middle" style={{width:"500px"}}/>
      </Modal>
        <Form
      form={form}
      name="advanced_search"
      className="ant-advanced-search-form"
      onFinish={onFinish}
    >
      <Row gutter={24}>
      {getFields()}
        <Col span={4} style={{ textAlign: 'right' }}>
          <Button type="primary" htmlType="submit">
            查询
          </Button>
          <Button
            style={{ margin: '0 8px' }}
            onClick={() => {
              form.resetFields();
            }}
          >
            重置
          </Button>
        </Col>
      </Row>
      <Row>
      </Row>
    </Form>
        <div style={{ marginBottom: 0 }}>
          <span style={{ marginLeft: 8 }}>
            {hasSelected ? `已选择 ${selectedRowKeys.length} 个` : ''}
          </span>
        </div>
        <Table rowSelection={rowSelection} columns={columns} dataSource={shopData} pagination={{pageSize:8}}/>
      </div>
    )
}
